import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AnimationController Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AnimationControllerDemo(),
    );
  }
}

class AnimationControllerDemo extends StatefulWidget {
  @override
  _AnimationControllerDemoState createState() => _AnimationControllerDemoState();
}

class _AnimationControllerDemoState extends State<AnimationControllerDemo> with SingleTickerProviderStateMixin {
  // 创建一个 AnimationController
  late AnimationController _controller;

  // 定义一个 Tween 来控制边角的动画
  late Animation<BorderRadius?> _animation;

  // 标记是否动画已经完成，控制点击的状态
  bool _isRound = false;

  @override
  void initState() {
    super.initState();

    // 创建 AnimationController，设置动画时长为 2 秒
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    // 使用 Tween 来定义边角的动画范围（从 0.0 到 32.0）
    _animation = BorderRadiusTween(
      begin: BorderRadius.zero, // 初始时为直角
      end: BorderRadius.circular(32.0), // 结束时为圆角32px
    ).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );

    // 监听动画完成的状态
    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        // 动画完成时，可以点击反向动画
        setState(() {
          _isRound = true;
        });
      } else if (status == AnimationStatus.dismissed) {
        // 动画回退完成时，可以点击正向动画
        setState(() {
          _isRound = false;
        });
      }
    });
  }

  @override
  void dispose() {
    // 释放 AnimationController 资源
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimationController Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 显示动画效果的容器
            AnimatedBuilder(
              animation: _animation,
              builder: (context, child) {
                return Container(
                  width: 150,
                  height: 150,
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: _animation.value, // 使用动画的边角值
                  ),
                  child: Center(
                    child: Text(
                      'Animating!',
                      style: TextStyle(color: Colors.white, fontSize: 20),
                    ),
                  ),
                );
              },
            ),
            SizedBox(height: 20),
            // 按钮来控制动画
            ElevatedButton(
              onPressed: () {
                // 如果当前是圆角状态，执行反向动画；如果是直角状态，执行正向动画
                if (!_controller.isAnimating) {
                  if (_isRound) {
                    _controller.reverse(); // 从32回到0
                  } else {
                    _controller.forward(); // 从0到32
                  }
                }
              },
              child: Text('Toggle Animation'),
            ),
          ],
        ),
      ),
    );
  }
}
